<template>
  <div class="home-blog">
    <div class="hero" :style="{ ...bgImageStyle }">
      <div class="content">
        <ModuleTransition delay="0.04">
          <!-- <h1
            v-if="recoShowModule && $frontmatter.heroText !== null"
          >{{ $frontmatter.heroText || $title || 'vuePress-theme-reco' }}</h1>-->
          <!-- <div class="heroImage">
            <img
              class="hero-img"
              v-if="recoShowModule && $frontmatter.titleImage"
              :style="heroImageStyle || {}"
              :src="$withBase($frontmatter.titleImage)"
              alt="hero"
            />
          </div>-->
        </ModuleTransition>
        <ModuleTransition>
          <div class="heroImage">
            <img
              class="hero-img"
              v-if="recoShowModule && $frontmatter.heroImage"
              :style="heroImageStyle || {}"
              :src="$withBase($frontmatter.heroImage)"
              alt="hero"
            />
          </div>
        </ModuleTransition>

        <ModuleTransition delay="0.08">
          <div>
            <span class="description element"></span>
          </div>
          <!-- <p class="element"></p> -->
        </ModuleTransition>
        <a @click="down" class="scroll-down bounce-enter-active down-arrow"></a>
      </div>
    </div>

    <ModuleTransition delay="0.16">
      <div v-show="recoShowModule" class="home-blog-wrapper" id="anchor">
        <div class="blog-list">
          <!-- 博客列表 -->
          <note-abstract :data="$recoPosts" :currentPage="currentPage"></note-abstract>
          <!-- 分页 -->
          <pagation
            class="pagation"
            :total="$recoPosts.length"
            :currentPage="currentPage"
            @getCurrentPage="getCurrentPage"
          />
        </div>
        <div class="info-wrapper">
          <PersonalInfo />
          <h4>
            <reco-icon icon="reco-category" />
            {{homeBlogCfg.category}}
          </h4>
          <ul class="category-wrapper">
            <li class="category-item" v-for="(item, index) in this.$categories.list" :key="index">
              <router-link :to="item.path">
                <span class="category-name">{{ item.name }}</span>
                <span
                  class="post-num"
                  :style="{ 'backgroundColor': getOneColor() }"
                >{{ item.pages.length }}</span>
              </router-link>
            </li>
          </ul>
          <hr />
          <h4 v-if="$tags.list.length !== 0">
            <reco-icon icon="reco-tag" />
            {{homeBlogCfg.tag}}
          </h4>
          <TagList @getCurrentTag="getPagesByTags" />
          <h4 v-if="$themeConfig.friendLink && $themeConfig.friendLink.length !== 0">
            <reco-icon icon="reco-friend" />
            {{homeBlogCfg.friendLink}}
          </h4>
          <FriendLink />
        </div>
      </div>
    </ModuleTransition>

    <ModuleTransition delay="0.24">
      <Content v-show="recoShowModule" class="home-center" custom />
    </ModuleTransition>
  </div>
</template>

<script>
import TagList from "@theme/components/TagList";
import FriendLink from "@theme/components/FriendLink";
import NoteAbstract from "@theme/components/NoteAbstract";
import pagination from "@theme/mixins/pagination";
import { ModuleTransition, RecoIcon } from "@vuepress-reco/core/lib/components";
import PersonalInfo from "@theme/components/PersonalInfo";
import { getOneColor } from "@theme/helpers/other";
import moduleTransitonMixin from "@theme/mixins/moduleTransiton";
import Typed from "typed.js";
export default {
  mixins: [pagination, moduleTransitonMixin],
  components: {
    NoteAbstract,
    TagList,
    FriendLink,
    ModuleTransition,
    PersonalInfo,
    RecoIcon
  },
  data() {
    return {
      recoShow: false,
      currentPage: 1,
      tags: [],
      src: "",
      num: ""
    };
  },
  computed: {
    recoShowModule() {
      return this.$parent.recoShowModule;
    },
    homeBlogCfg() {
      return this.$recoLocales.homeBlog;
    },
    actionLink() {
      const { actionLink: link, actionText: text } = this.$frontmatter;

      return {
        link,
        text
      };
    },
    heroImageStyle() {
      return this.$frontmatter.heroImageStyle || {};
    },
    bgImageStyle() {
      const initBgImageStyle = {
        textAlign: "center",
        overflow: "hidden",
        // background: `
        //     url(${
        //       this.$frontmatter.bgImage ? this.src : require("../images/bg.svg")
        //     }) center/cover no-repeat
        //   `
        background: `
            url(${this.src}) center/cover no-repeat
          `
      };
      const { bgImageStyle } = this.$frontmatter;
      return bgImageStyle
        ? { ...initBgImageStyle, ...bgImageStyle }
        : initBgImageStyle;
    },
    heroHeight() {
      return document.querySelector(".hero").clientHeight;
    }
  },
  mounted() {
    // console.log(this.$frontmatter.bgImage);
    // 背景图随机
    this.num = Math.ceil(Math.random() * 8);
    this.src = this.$frontmatter.bgImage[this.num - 1];
    // console.log(this.num);
    // console.log(this.src);

    this.recoShow = true;
    this._setPage(this._getStoragePage());

    // 打字效果
    let typed = new Typed(".element", {
      /**
       * @property {array} strings strings to be typed
       * @property {string} stringsElement ID of element containing string children
       */
      strings: [
        "欲要从容，必先心定",
        "但行好事，莫问前程",
        "我登楼观百川，入海即入我怀",
        "君子作而论道，少年起而行之",
        "星光不问赶路人，时光不负有心人",
        "胸中一点浩然气，天地千里快哉风",
        "遇事不决，可问春风。春风不语，遵循己心"
      ],
      stringsElement: null,

      /**
       * @property {number} typeSpeed type speed in milliseconds 输入速度，以毫秒为单位
       */
      typeSpeed: 100,

      /**
       * @property {number} startDelay time before typing starts in milliseconds 键入之前的时间以毫秒开始
       */
      startDelay: 0,

      /**
       * @property {number} backSpeed backspacing speed in milliseconds 退格速度，以毫秒为单位
       */
      backSpeed: 30,

      /**
       * @property {boolean} smartBackspace only backspace what doesn't match the previous string 是否只退格与前一个字符串不匹配的内容
       */
      smartBackspace: true,

      /**
       * @property {boolean} shuffle shuffle the strings 是否洗牌
       */
      shuffle: false,

      /**
       * @property {number} backDelay time before backspacing in milliseconds 退回之前的时间，以毫秒为单位
       */
      backDelay: 700,

      /**
       * @property {boolean} fadeOut Fade out instead of backspace 是否用淡出替代空格
       * @property {string} fadeOutClass css class for fade animation 用于淡入淡出动画的css类
       * @property {boolean} fadeOutDelay Fade out delay in milliseconds 以毫秒为单位淡出延迟
       */
      fadeOut: false,
      fadeOutClass: "typed-fade-out",
      fadeOutDelay: 500,

      /**
       * @property {boolean} loop loop strings 是否循环字符串
       * @property {number} loopCount amount of loops 循环次数
       */
      loop: true,
      loopCount: Infinity,

      /**
       * @property {boolean} showCursor show cursor 是否显示光标
       * @property {string} cursorChar character for cursor 光标的字符
       * @property {boolean} autoInsertCss insert CSS for cursor and fadeOut into HTML <head> 是否将光标和fadeOut的CSS插入HTML <head>
       */
      showCursor: true,
      cursorChar: "|",
      autoInsertCss: true,

      /**
       * @property {string} attr attribute for typing attr 输入属性
       * Ex: input placeholder, value, or just HTML text 例如：输入占位符，值或仅HTML文本
       */
      attr: null,

      /**
       * @property {boolean} bindInputFocusEvents bind to focus and blur if el is text input 如果el是文本输入，则绑定到焦点和模糊
       */
      bindInputFocusEvents: false,

      /**
       * @property {string} contentType 'html' or 'null' for plaintext 明文的'html'或'null'
       */
      contentType: "html"
    });
  },
  methods: {
    // 屏幕下拉
    down() {
      // console.log(window.screen.height);
      // 监听是移动端还是pc端
      if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
        window.scrollTo(0, window.screen.height);
        // console.log("移动端");
      } else {
        window.scrollTo(0, window.screen.height - 105);
        // console.log("pc");
      }
    },
    // 获取当前页码
    getCurrentPage(page) {
      this._setPage(page);
      setTimeout(() => {
        window.scrollTo(0, this.heroHeight);
      }, 100);
    },
    // 根据分类获取页面数据
    getPages() {
      let pages = this.$site.pages;
      pages = pages.filter(item => {
        const { home, date } = item.frontmatter;
        return !(home == true || date === undefined);
      });
      // reverse()是为了按时间最近排序排序
      this.pages = pages.length == 0 ? [] : pages;
    },
    getPagesByTags(tagInfo) {
      this.$router.push({ path: tagInfo.path });
    },
    _setPage(page) {
      this.currentPage = page;
      this.$page.currentPage = page;
      this._setStoragePage(page);
    },
    getOneColor
  }
};
</script>

<style lang="stylus">
.home-blog {
  padding: 0;
  margin: 0px auto;

  .hero {
    // margin: $navbarHeight auto 0;
    position: relative;
    box-sizing: border-box;
    padding: 0 20px;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;

    .hero-img {
      max-width: 300px;
      margin: 0 auto 1.5rem;
    }

    h1 {
      display: block;
      margin: 0 auto 1.8rem;
      font-size: 2.5rem;
    }

    .description {
      margin: 1.8rem auto;
      font-size: 1.6rem;
      line-height: 1.3;
      color: #fff;
    }
  }

  .home-blog-wrapper {
    display: flex;
    align-items: flex-start;
    margin: 20px auto 0;
    padding: 0 20px;
    max-width: $homePageWidth;

    .blog-list {
      flex: auto;
      width: 0;

      .abstract-wrapper {
        .abstract-item:last-child {
          margin-bottom: 0px;
        }
      }
    }

    .info-wrapper {
      position: -webkit-sticky;
      position: sticky;
      top: 70px;
      overflow: hidden;
      transition: all 0.3s;
      margin-left: 15px;
      flex: 0 0 300px;
      height: auto;
      box-shadow: var(--box-shadow);
      border-radius: $borderRadius;
      box-sizing: border-box;
      padding: 0 15px;
      background: var(--background-color);

      &:hover {
        box-shadow: var(--box-shadow-hover);
      }

      h4 {
        color: var(--text-color);
      }

      .category-wrapper {
        list-style: none;
        padding-left: 0;

        .category-item {
          margin-bottom: 0.4rem;
          padding: 0.4rem 0.8rem;
          transition: all 0.5s;
          border-radius: $borderRadius;
          box-shadow: var(--box-shadow);
          background-color: var(--background-color);

          &:hover {
            transform: scale(1.04);

            a {
              color: $accentColor;
            }
          }

          a {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: var(--text-color);

            .post-num {
              width: 1.6rem;
              height: 1.6rem;
              text-align: center;
              line-height: 1.6rem;
              border-radius: $borderRadius;
              background: #eee;
              font-size: 13px;
              color: #fff;
            }
          }
        }
      }
    }
  }
}

@media (max-width: $MQMobile) {
  .home-blog {
    .hero {
      height: 450px;

      img {
        max-height: 210px;
        margin: 2rem auto 1.2rem;
      }

      h1 {
        margin: 0 auto 1.8rem;
        font-size: 2rem;
      }

      .description {
        font-size: 1.2rem;
      }

      .action-button {
        font-size: 1rem;
        padding: 0.6rem 1.2rem;
      }
    }

    .home-blog-wrapper {
      display: block !important;

      .blog-list {
        width: auto;
      }

      .info-wrapper {
        // display none!important
        margin-left: 0;

        .personal-info-wrapper {
          display: none;
        }
      }
    }
  }
}

@media (max-width: $MQMobileNarrow) {
  .home-blog {
    .hero {
      height: 450px;

      img {
        max-height: 210px;
        margin: 2rem auto 1.2rem;
      }

      h1 {
        margin: 0 auto 1.8rem;
        font-size: 2rem;
      }

      h1, .description, .action {
        // margin: 1.2rem auto;
      }

      .description {
        font-size: 1.2rem;
      }

      .action-button {
        font-size: 1rem;
        padding: 0.6rem 1.2rem;
      }
    }

    .home-blog-wrapper {
      display: block !important;

      .blog-list {
        width: auto;
      }

      .info-wrapper {
        // display none!important
        margin-left: 0;

        .personal-info-wrapper {
          display: none;
        }
      }
    }
  }
}

.scroll-down {
  display: block;
  margin: 12rem auto 0 auto;
  bottom: 45px;
  width: 34px;
  height: 34px;
  font-size: 34px;
  text-align: center;
}

.bounce-enter-active {
  animation: bounce-in 5s 3s infinite;
}

/* .bounce-leave-active { */
/* animation: bounce-in 4s 2s reverse; */
/* } */
@keyframes bounce-in {
  0% {
    transform: translateY(0);
  }

  20% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }

  80% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(0);
  }
}

.down-arrow {
  width: 20px;
  height: 20px;
}

.down-arrow:after {
  content: '';
  display: block;
  cursor:pointer;
  width: 20px;
  height: 20px;
  border-right: 3px solid #ffffff;
  border-top: 3px solid #ffffff;
  -webkit-transform: rotate(135deg); /* 箭头方向可以自由切换角度 */
  transform: rotate(135deg);
}

.element {
  height: 30px;
}

.heroImage {
  width: 800px;
}

.typed-cursor {
  font-size: 1.6rem;
  color: #fff;
}
</style>
